<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 基本配置 -->
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <!-- 图标标题 -->
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/icon"/>
    <title>云曦·云中舍</title>
</head>

<body th:fragment="loadcontent">
<div>
    <div id="overLayer">
        <div id="cloud1" class="cloudFirst"></div>
        <div id="cloud2" class="cloudSecond"></div>
        <div id="cloud3" class="cloudThird"></div>
        <div id="cloud4" class="cloudForth"></div>
    </div>
    <div class="loading">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<link rel="stylesheet" th:href="@{/assets/css/resident/load.css}">
<style>
    @keyframes cloud1 {
        0% {
            left: 5vw;
            top: 5vh;
            opacity: 0.8;
            visibility: visible;
        }
        100% {
            left: 100vw;
            top: 100vh;
            opacity: 0.05;
            visibility: hidden;
        }
    }

    @-webkit-keyframes cloud1 {
        0% {
            left: 5vw;
            top: 5vh;
            opacity: 0.8;
            visibility: visible;
        }
        100% {
            left: 100vw;
            top: 100vh;
            opacity: 0.05;
            visibility: hidden;
        }
    }

    @keyframes cloud2 {
        0% {
            left: 5vw;
            bottom: 5vh;
            opacity: 0.8;
            visibility: visible;
        }
        100% {
            left: 100vw;
            bottom: 100vh;
            opacity: 0.05;
            visibility: hidden;
        }
    }

    @-webkit-keyframes cloud2 {
        0% {
            left: 5vw;
            bottom: 5vh;
            opacity: 0.8;
            visibility: visible;
        }
        100% {
            left: 100vw;
            bottom: 100vh;
            opacity: 0.05;
            visibility: hidden;
        }
    }

    @keyframes cloud3 {
        0% {
            right: 5vw;
            top: 5vh;
            opacity: 0.8;
            visibility: visible;
        }
        100% {
            right: 100vw;
            top: 100vh;
            opacity: 0.05;
            visibility: hidden;
        }
    }

    @-webkit-keyframes cloud3 {
        0% {
            right: 5vw;
            top: 5vh;
            opacity: 0.8;
            visibility: visible;
        }
        100% {
            right: 100vw;
            top: 100vh;
            opacity: 0.05;
            visibility: hidden;
        }
    }

    @keyframes cloud4 {
        0% {
            right: 5vw;
            bottom: 5vh;
            opacity: 0.8;
            visibility: visible;
        }
        100% {
            right: 100vw;
            bottom: 100vh;
            opacity: 0.05;
            visibility: hidden;
        }
    }

    @-webkit-keyframes cloud4 {
        0% {
            right: 5vw;
            bottom: 5vh;
            opacity: 0.8;
            visibility: visible;
        }
        100% {
            right: 100vw;
            bottom: 100vh;
            opacity: 0.05;
            visibility: hidden;
        }
    }

    .cloudFirst {
        background: url("/assets/imgs/resident/index/cloud1.png") no-repeat;
        width: 650px;
        height: 481px;
        background-size: 100% 100%;
        position: absolute;
        opacity: 0.8;
        scale: 500%;
    }

    .cloudSecond {
        background: url("/assets/imgs/resident/index/cloud2.png") no-repeat;
        width: 650px;
        height: 481px;
        background-size: 100% 100%;
        position: absolute;
        opacity: 0.8;
        scale: 500%;
    }

    .cloudThird {
        background: url("/assets/imgs/resident/index/cloud1.png") no-repeat;
        width: 650px;
        height: 481px;
        background-size: 100% 100%;
        position: absolute;
        opacity: 0.8;
        scale: 500%;
    }

    .cloudForth {
        background: url("/assets/imgs/resident/index/cloud2.png") no-repeat;
        width: 650px;
        height: 481px;
        background-size: 100% 100%;
        position: absolute;
        opacity: 0.8;
        scale: 500%;
    }

    #cloud1 {
        left: 5vw;
        top: 5vh;
        animation: cloud1 7s forwards;
        -webkit-animation: cloud1 7s forwards;
    }

    #cloud2 {
        left: 5vw;
        bottom: 5vh;
        animation: cloud2 7s forwards;
        -webkit-animation: cloud2 7s forwards;
    }

    #cloud3 {
        right: 5vw;
        top: 5vh;
        animation: cloud3 7s forwards;
        -webkit-animation: cloud3 7s forwards;
    }

    #cloud4 {
        right: 5vw;
        bottom: 5vh;
        animation: cloud4 7s forwards;
        -webkit-animation: cloud4 7s forwards;
    }

    #overLayer {
        width: 100%;
        height: 100%;
        z-index: 999;
        overflow: hidden;
        background-color: #6fc8e8;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
</style>

<!-- js插件 -->
<!-- jquery -->
<script th:src="@{/plugins/jquery-3.5.1/jquery-3.5.1.js}"></script>

<script>
    /**
     * TODO load 页面加载层
     */
    $(document).ready(function () {
        $(".loading").delay(2500).fadeOut("slow")
        $("#overLayer").delay(3500).fadeOut("slow")
    })
</script>

</body>
</html>

